<template>
  <!-- 套餐详情 -->
  <el-dialog
    title="套餐详细"
    :visible="value"
    width="700px"
    custom-class="dialog-box"
    @close="onClose"
    @open="onOpen"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <!-- <h3 style="margin:0;">
      {{title}}
      （￥{{packagePrice}}）
    </h3> -->
    <!-- <br /> -->
    <table class="grid-table">
      <thead>
        <tr>
          <th>名称</th>
          <th>分类</th>
          <th>项目</th>
          <th>剩余次数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableList" :key="index">
          <template v-for="(item2,index2) in item">
            <td v-if="item2.row>0" :key="index2" :rowspan="item2.row">
              {{item2.name}}
              <template v-if="item2.isPrice">（￥{{item2.packagePrice}}）</template>
            </td>
            <td v-else :key="index2">{{item2.name}} </td>
            <td v-if="item2.remainFrequency !=null && item2.remainFrequency !=undefined"  :key="'100021'+index2">{{item2.remainFrequency?item2.remainFrequency:0}}</td>
          </template>
        </tr>
      </tbody>
    </table>
  </el-dialog>
</template>
<script>
export default {
  props: ["value", "curItem"],
  data() {
    return {
      title: "",
      packagePrice: "",
      tableList: []
    };
  },
  methods: {
    getData() {
      const th = this;
      let j = {
        id: th.curItem.id
        // id:th.curItem.packageId
      };
      th.$api.getUserTreeList(j).then(res => {
        if (res.executed) {
          let data = res.dataBody;
          th.title = data[0].packageName;
          th.packagePrice = data.packagePrice;
          // th.tableList =data;
          // th.tableList = data.packageProjectTreeSeconds;
          th.forData(data);
        } else {
          th.$message.error(res.message);
          th.onClose();
        }
      });
    },
    forData(arr) {
      const th = this;
      const fn1 = function() {};
      let list = [];
      let tdList = [];
      //循环3次
      const fn3 = function(arr) {
        arr.forEach(ele => {
          let j = {
            row: 1,
            name: ele.detailName,
            remainFrequency: ele.remainFrequency?ele.remainFrequency:0
          };
          tdList.push(j);
          list.push(tdList);
          tdList = [];
        });
      };
      //循环2次
      const fn2 = function(arr,obj) {
        arr.forEach(ele => {
          let j = {
            row: ele.packageProjectItemDetails.length,
            name: ele.sourceName,
            packagePrice:ele.packagePrice
          };
          obj.row += j.row;
          tdList.push(j);
          fn3(ele.packageProjectItemDetails);
        });
      };
      arr.forEach(ele => {
        let j = {
          row: 0,
          name: ele.itemName,
          isPrice:true,
          packagePrice: ele.packagePrice
        };
        tdList.push(j);
        fn2(ele.userPackageProjectTreeThrids, j);
      });
      th.tableList = list;
    },
    onOpen() {
      const th = this;
      th.getData();
    },
    onClose() {
      const th = this;
      th.tableList = [];
      th.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>